<template>
	<view>
		<view class="detail_data">
			<view class="detail_data_title">
				<text class="gray3 fb">商户结算</text>
				<text class="gray9 f24">订单日期：{{detail.createTime}}</text>
			</view>
			<view class="detail_data_content">
				<view class="detail_data_item">
					<view class="data_price">{{ detail.orderMoney }}</view>
					<view class="data_txt">订单结算金额</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.payMoney }}</view>
					<view class="data_txt">支付金额</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.expressMoney }}</view>
					<view class="data_txt">运费金额</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.realSupplierMoney }}</view>
					<view class="data_txt">商户收入金额</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price"> {{ detail.supplierMoney }}</view>
					<view class="data_txt">商户结算总金额</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.refundMoney }}</view>
					<view class="data_txt">商户退款金额</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.agentMoney }}</view>
					<view class="data_txt">分销佣金</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.sysMoney }}</view>
					<view class="data_txt">平台抽成金额</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.realSysMoney }}</view>
					<view class="data_txt">平台结算总抽成</view>
				</view>
				<view class="detail_data_item">
					<view class="data_price">{{ detail.refundSysMoney }}</view>
					<view class="data_txt">平台退款抽成</view>
				</view>
			</view>
		</view>
		<view class="detail_data">
			<view class="detail_data_title gray3 fb">商品信息</view>
			<view class="product-item mb20 " v-for="(item, index) in product_list" :key="index">
				<view class="d-s-c ww100 pitem-top">
					<image class="detail_prolist_img f-s-0" :src="item.productImage" mode="aspectFill"></image>
					<view class="flex-1">
						<view class="d-b-c ww100 mb10">
							<view class="product-name text-ellipsis">{{item.productName}}</view>
							<view class="gray9">X{{item.totalNum}}</view>
						</view>
						<view v-if="item.productAttr!=''" class="gray9 mb10">{{item.productAttr}}</view>
						<view class="d-b-c ww100">
							<view class="gray3 f24"><text class="gray9">支付金额:</text>{{item.totalPayPrice}}</view>
							<view class="gray3 f24" v-if="item.refundMoney"><text
									class="gray9">退款金额:</text>{{item.refundMoney || 0}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: "", //订单id
				detail: {},
				product_list: [],
				specData: {},
				index: 0,
				price: 0,
			};
		},
		onLoad(e) {
			let self = this;
			self.settled_id = e.settled_id;
		},
		onShow() {
			this.getData();
		},
		methods: {
			//获取商品数据
			getData() {
				let self = this;
				self._post(
					"supplier/index/settledetail", {
						settledId: self.settled_id,
					},
					(res) => {
						self.product_list = res.data.order.product;
						self.detail = res.data.model;
					}
				);
			},
		},
	};
</script>

<style>
	.detail_data {
		padding: 0 20rpx;
		margin: 0 auto;
	}

	.detail_data_title {
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 94rpx;
	}

	.detail_data_content {
		background-color: #fff;
		border-radius: 15rpx;
		padding-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.detail_data_item {
		width: 33.3%;
		margin: 15rpx 0;
		text-align: center;
		position: relative;
	}

	.data_price {
		color: #333;
		font-size: 32rpx;
		margin-bottom: 14rpx;
	}

	.data_txt {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

	.detail_data_item::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		right: 0;
		width: 1rpx;
		height: 28rpx;
		background: #EEEEEE;
	}

	.detail_data_item:nth-child(3n)::after {
		height: 0;
	}

	.detail_data_item:last-child::after {
		height: 0;
	}

	.detail_prolist_img {
		width: 96rpx;
		height: 96rpx;
		border-radius: 15rpx;
		margin-right: 15rpx;
		display: block;
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
	}

	.product-item {
		background: #fff;
		border-radius: 25rpx;
		padding: 0 24rpx;
	}

	.pitem-top {
		padding: 26rpx 0;
	}
</style>